<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* margin  n盒子外边距  盒子边哭那个外侧之间 */
        /* margin -top -right -tottom -left 往外踹*/
        /* 竖直方向margin会坍塌 margin不叠加 以大值为准 */
        /* 左右方向不塌陷  完美叠加 */
        /* 一些元素有默认的margin值 body p ul*/
        /* 清除默认边距 *{maegin:0;padding:0;}(通配符*效率低) body,ul,p{maegin:0;padding:0;} */
        /* 盒子的水平居中 auto  margin:0,auto*/
        /* 盒子的垂直居中 绝对定位技术 */

        span{border: 1px solid #000;}
        .span1{margin-right: 30px;}
        .span2{margin-left: 40px;}
        .box1{
            background-color: orange;
            width: 200px;
            height: 200px;
            margin-bottom: 30px;
        }
        .box2{
            background-color: blue;
            width: 200px;
            height: 200px;
            margin-top: 40px;
        }
        body,ul,p{margin:0;padding:0;}
        section{
            background-color: red;
            width:600px;
            height: 600px;
            /* 盒子水平居中 */
            margin:0 auto;
            /* 文字水平居中 */
            text-align: center;
            /* 单行文字垂直居中 */
            line-height: 600px;
        }
    </style>
</head>
<body>
    <span class="span1">右踹30</span><span class="span2">左踹40，共隔开70</span>
    <div class="box1">向下踹30px</div>
    <div class="box2">向上踹40px   不叠加 塌陷成40px</div>
    <ul>
        <li>111</li>
        <li>111</li>
        <li>111</li>
    </ul>
    <p>23456</p>
    <section>
        1111
    </section>
</body>
</html>